<template>
  <div class="lr" v-show="islogin">
    <div class="inner">
      <div class="logo">
        <img src="../../assets/kt.jpg">
      </div>
      <div class="account-wrapper">
        <input v-model="username" type="text" class="form-l" placeholder="请输入姓名">
      </div>
      <!--div class="password-wrapper">
        <input type="password" class="form-l" placeholder="请输入密码">
      </div-->
      <div class="loginbutton">
        <button @click="login">登 陆</button>
      </div>
<!--      <div @click="showregister" class="registerbutton">
        <span>立即注册</span>
      </div>-->
    </div>
    <register :name="username" @closeregister="closeregister" v-if="registershow" class="registerpage"></register>
  </div>
</template>

<script type="text/ecmascript-6">
  import register from './register';
  import {Toast} from 'vant';

  export default {
    data() {
      return {
        islogin: true,
        registershow: false,
        username: ''
      };
    },
    methods: {
      async login() {
        if (this.username === '') {
          Toast.fail('用户名不能为空');
          // Dialog.confirm({
          //   title: '提示',
          //   message: '用户名不存在是否跳转注册页面？'
          // }).then(() => {
          //   this.registershow = true;
          // }).catch(() => {
          //   // on cancel
          // });
        } else {
          // 需要传递user信息到主页
          const data = {
            'username': this.username
          };
          const response = await this.$store.user.login(data);
          if (response.code === '200') {
            this.islogin = false;
            this.$store.local.set('user', response.object);
          } else {
            Toast.fail('用户名不存在');
            // Dialog.confirm({
            //   title: '提示',
            //   message: '用户名不存在是否跳转注册页面？'
            // }).then(() => {
            //   this.registershow = true;
            // }).catch(() => {
            //   // on cancel
            // });
          }
        }
      },
      showregister() {
        this.registershow = true;
      },
      closeregister(username) {
        // 这里拿到username并且关掉注册页面
        if (username) {
          this.username = username;
        }
        this.registershow = false;
      }
    },
    components: {
      register
    }
  };
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .lr
    position absolute
    left 0
    top 0
    background #fff
    z-index 1000
    width 100%
    height 100%
    .inner
      width 100%
      text-align center
      margin 100px auto
      .logo
        margin-bottom 30px
      input.form-l
        margin-bottom 20px
        border 1px solid #ddd
        font-size 15px
        padding 10px 10px 10px 20px
        width 80%
        text-align center
        height 15%
        border-radius 50px
        outline none
      .loginbutton button
        width 60%
        height 35px
        border none
        outline none
        border-radius 50px
        padding 20px auto !important
        margin-top 40px
      .registerbutton
        margin-top 50px
    .registerpage
      position absolute
      left 0
      top 0
      width 100%
      background-color #0a6999
</style>
